<template>
  <div class="cooper-account-select-wrap">
    <div :class="{'mobile-create-flex': showMobilePage}" class="stages-box">
      <div v-if="!isExhibition" class="stages">
        <div v-for="(item, index) in selectData" :key="index" class="stage-items">
          <el-form-item :rules="rules['contractInfo.cooperPlatforms.type']" :prop="'contractInfo.cooperPlatforms.' + index + '.type'">
            <el-select v-model="item.type" placeholder="请选择" popper-class="global-select-down" @change="changeHandle($event, index)">
              <el-option
                v-for="item in platformOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <div v-if="item.type === 6" class="name-box">
            <el-form-item :rules="rules['contractInfo.cooperPlatforms.name']" :prop="'contractInfo.cooperPlatforms.' + index + '.name'">
              <el-input v-model="item.name" :maxlength="64" placeholder="请输入合作平台" />
            </el-form-item>
            <el-tooltip content="提示：需要填写多个平台请用【、】隔开" class="item" effect="dark" placement="top">
              <tipIcon is-diy />
            </el-tooltip>
            <!-- <span class="tip">提示：需要填写多个平台请用【、】隔开</span> -->
          </div>
          <el-form-item :rules="rules['contractInfo.cooperPlatforms.account']" :prop="'contractInfo.cooperPlatforms.' + index + '.account'">
            <el-input v-model="item.account" :maxlength="64" placeholder="请输入合作账号信息" />
          </el-form-item>
          <div v-if="selectData.length > 1" class="delete-btn" @click="deleteFun(index)">删除</div>
        </div>
      </div>
      <div v-if="!isExhibition" class="add-btn" @click="add">
        添加
      </div>
    </div>

    <div v-if="isExhibition">
      <div v-for="(item, index) in selectData" :key="index" :style="`${showMobilePage ? '' : 'display: flex'}`" :class="{'mb5':showMobilePage}" class="cooper-platform">
        <div :class="{'item': !showMobilePage}" style="display: inline-block;">
          <span v-if="item && item.type">{{ item.type | mapOptions(platformOptions) }}</span>
          <span v-else>--</span>
          <span v-if="item.type === 6">{{ item.name || '--' }}</span>
          <span style="color: #666;">(平台)</span>
        </div>
        <div :style="`margin-left: ${showMobilePage?'0px':'82px'};`" :class="{'item': !showMobilePage}">
          <span v-if="item && item.account" style="color: #999;padding-right: 7px;">账号信息:</span>
          <span v-if="item && item.account" style="word-break: break-all;">{{ item.account || '--' }}</span>
        </div>
      </div>
      <div v-if="!selectData || selectData && selectData.length === 0">
        --
      </div>
    </div>
  </div>
</template>
<script>
import { platformOptions } from '../../module/options';
import { mapOptions } from '@/filters';
import addIcon from '@/assets/reportManage/add_icon.png';
import { mapState } from 'vuex';
export default {
  name: 'CooperAccountSelect',
  filters: {
    mapOptions
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Array,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    isExhibition: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      platformOptions,
      addIcon
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    add() {
      const item = { type: 1, name: '', account: '' };
      this.selectData.push(item);
    },
    deleteFun(index) {
      if (index !== -1) {
        this.selectData.splice(index, 1);
      }
    },
    changeHandle(value, index) {
      if (value !== 6) {
        this.selectData[index]['name'] = '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./common.scss');
.cooper-account-select-wrap {
  // width: 560px;
}
.cooper-platform {
  .item {
    width: calc(50% - 60px);
  }
}
.stage-items {
  display: flex;
  margin-bottom: 18px;
}
.stage-items:last-child {
  margin-bottom: 0px;
}
.stages-box {
  margin-top: 0px;
}
.delete-btn {
  margin-right: 16px;
}
.name-box {
  display: flex;
  align-items: center;
  margin-right: 16px;
  & ::v-deep {
    .el-input__inner {
      max-width: unset !important;
      min-width: unset !important;
      width: 206px !important;
    }
  }
  .tip {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #606266;
  }
}
.mobile-create-flex {
  ::v-deep {
    .el-form-item {
      margin-bottom: 16px !important;
    }
    .el-form-item__error {
      margin-left: 0 !important;
    }
  }
  .stage-items {
    flex-wrap: wrap;
  }
  .date-picker-item {
    margin-bottom: 0 !important;
  }
}
</style>
